<template>
	<view class="container">
		<view>
			<u--form labelPosition="left" :model="model1" :rules="rules" ref="form" labelWidth='100px'
				:labelStyle='labelStyle'>
				<view class="box">
					<u-form-item label="输入密码" prop="oldpassword" borderBottom>
						<u--input v-model="model1.oldpassword" placeholder="输入密码" border="none"></u--input>
					</u-form-item>
					<u-form-item label="确认密码" prop="password" borderBottom>
						<u--input v-model="model1.password" placeholder="确认密码" border="none"></u--input>
					</u-form-item>
				</view>
			</u--form>
			<u-button type="primary" text="确定" @click="submit" class='but'></u-button>
		</view>
	</view>
</template>

<script>
	import {editpassword} from '@/api/userid.js'
	export default {
		data() {
			return {
				showSex: false,
				labelStyle: {
					color: '#666'
				},
				model1: {
					password:'',
					oldpassword:''
						
				},
				show: false,
				
				rules: {
					'oldpassword': {
						type: 'string',
						required: true,
						message: '请输入密码',
						trigger: ['blur', 'change']
					},
					'password': {
						type: 'string',
						required: true,
						message: '请确认密码',
						trigger: ['blur', 'change']
					},
				},
			};
		},
		onShow() {
			this.model1.userId=uni.getStorageSync('userId')
		},
		methods: {
			submit() {
				this.$refs.form.validate().then(res=>{
					if(this.model1.password!==this.model1.oldpassword){
						uni.showToast({
							icon:'none',
							title:'两次输入的密码不一样'
						})
						return
					}
					editpassword(this.model1)
					.then(res=>{
						if(res.code==200){
							uni.showToast({
								icon:'none',
								title:'密码修改成功'
							})
							setTimeout(()=>{
								uni.navigateBack({
									delta:2
								})
							},1500)
						}
					})
					.catch(err=>{
						console.log(err);
						uni.showToast({
							icon:'none',
							title:err
						})
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	.container {
		padding: 24rpx;
		background-color: #f6f6f6;

		.title {
			font-size: 28rpx;
			font-weight: 500;
			color: #999999;
			line-height: 44rpx;
			padding: 20rpx 48rpx;
		}

		.box {
			padding: 0rpx 48rpx;
			background-color: #fff;
			border-radius: 20rpx;
		}
	}

	.but {
		margin: 30rpx 0;
	}
</style>
